<template>
	<div class="wrapper">
		<div class='banner' @click='handleClick'>
			<img class="img" :src='bannerImg'/>  
			<div class="desc-content">
				<div class="title">{{sightName}}</div>
				<div class="number">
					<span class="icon iconfont">&#xe612;</span>
					<span>39</span>
				</div>
			</div>
	   </div>
	  <!--  //gallery -->
	  <transition-fade>
	  <common-gallery v-show='flag' @close='handleClose' :imgUrl='gallaryImgs'></common-gallery>
	</transition-fade>
	</div>
</template>
<script>
import CommonGallery from 'commons/gallery/gallery.vue'
import transitionFade from '@/pages/fade/fade.vue'
 export default{
 	name:'detailHeader',
 	components:{
 		CommonGallery,
 		transitionFade
 	},
 	props:{
 		sightName:String,
 		bannerImg:String,
 		gallaryImgs:Array,
 	},
 	data:function(){
 		return {flag:false}
 	},
 	methods:{
 		handleClick:function(){
 			this.flag=true
 		},
 		handleClose:function(){
 			this.flag=false
 		}
 	}
 }
</script>
<style lang='stylus' scoped>
.wrapper
	height:200rem
	.banner
		overflow:hidden
		width:100%
		height:0
		position:relative
		padding-bottom:55%
		.img
			width:100%
		.desc-content 
			display:flex
			position:absolute
			left:0
			right:0
			bottom:0
			line-height:0.6rem
			color:#fff
			background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
			.title
				flex:1
				font-size:0.32rem
				padding:0 0.2rem
			.number
				font-size:0.24rem
				padding:0 0.4rem
				margin-top:0.14rem
				height:0.32rem
				line-height:0.32rem
				border-radius:0.2rem
				background:rgba(0,0,0,0.8)
				.icon
					font-size:0.24rem
</style>